<template>
	<view>
		<view style="margin: 0upx 30upx;min-height: 100upx;">
			<textarea maxlength="2050" style="min-height: 100upx;width: 100%;margin-top: 20upx;" v-model="content" placeholder="这一刻的想法..." placeholder-style="" />
		</view>
		
		<!-- 图片区域 -->
		<view style="min-height: 150upx;background-color: #fff;" v-if="avatar.length>0">
			<view style="display: inline-block;overflow: hidden;width: 150upx;height: 150upx;border-radius: 10upx;border: 2upx solid #ccc;margin-left: 20upx;margin-top: 20upx;" v-for="(img,index) in avatar" :key="index"  @tap.stop.prevent="getPhotoClickIdx" :data-index="index" :data-imgs="avatar">
				<image :src="img" mode="aspectFill" @longpress.stop.prevent="toggleMask1('show', index)" style="width: 150upx;height: 150upx;"></image>
			</view>
			<view style="display: inline-block;width: 150upx;height: 150upx;border-radius: 10upx;border: 2upx solid #ccc;margin-left: 20upx;margin-top: 20upx;text-align: center;font-size: 55upx;line-height: 145upx;vertical-align: top;" @click.stop.prevent="chg_Image()">
				+
			</view>
		</view>
		
		<!-- 视频区域 -->
		<view style="min-height: 180upx;background-color: #fff;" v-if="mp4_video.length>0">
			<view style="display: inline-block;width: 300upx;margin-left: 20upx;overflow: hidden;">
				<video :src="mp4_video[0]" style="width: 300upx;"></video>
			</view>
		</view>
		
		<!-- 底部发表按钮 -->
		<button type="default" style="background-color: #000000;color: #fff;position: fixed;bottom: 60upx;width: 90%;margin: 0 5%;z-index: 20;" @click="submit">发表</button>
		
		<!-- 删除面板 -->
		<view class="mask" :class="maskState1===0 ? 'none' : maskState1===1 ? 'show' : ''" @click="toggleMask1">
			<view class="mask-content">
				
				<view style="width: 90%;margin: 0 auto;height: 80upx;line-height: 80upx;background-color: #f3f3f3;border-radius: 16upx;text-align: center;margin-top: 110upx;color: #EC4E3F;font-size: 32upx;z-index: 999;" @click="del_img(index)">
					删除
				</view>
				<view style="width: 90%;margin: 0 auto;height: 80upx;line-height: 80upx;background-color: #f3f3f3;border-radius: 16upx;text-align: center;margin-top: 20upx;color: #1A79F3;font-size: 32upx;z-index: 999;">
					取消
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				res:[],
				user_id:'',
				avatar:[],
				mp4_video: [],
				content: '', // 
				maskState1: 0, //删除面板显示状态
			};
		},
		onLoad:function(){
			uni.showLoading()
			uni.getStorage({
				key: 'user_id',
				success: (res) => {
					this.user_id = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../pages/login/login'
					});
				}
			});
		},
		methods:{
			setAjax(){
				try {
					const avatar = uni.getStorageSync('avatar_');
					if (avatar) {
						this.avatar = JSON.parse(avatar)
						// 拿到数据之后就清除avatar_缓存
						uni.removeStorage({
						  key: 'avatar_'
						});
					}
				} catch (e) {
				  // error
				}
				try {
					const mp4_video = uni.getStorageSync('mp4_video');
					if (mp4_video) {
						this.mp4_video = JSON.parse(mp4_video)
						// console.log(this.mp4_video)
						// 拿到数据之后就清除avatar_缓存
						uni.removeStorage({
						  key: 'mp4_video'
						});
					}
				} catch (e) {
				  // error
				}
				uni.hideLoading()
			},
			chg_Image(){
				var _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						let file = res.tempFilePaths
						for(var i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'https://cx.mingmeijt.com/Api/Upload/index',
								filePath: file[i],
								name: 'file',
								formData: {
									'session_id': uni.getStorageSync("sessionid")
								},
								success: (res) => {
									if (_this.avatar.length != 0) {
										if (_this.avatar.length >=9) {
											uni.showToast({
												title: '最多只能上传九张哦~',
												icon: 'none'
											})
											return
										} else {
											_this.avatar = _this.avatar.concat('https://cx.mingmeijt.com' + JSON.parse(res.data).data)
										}
									} else {
											_this.avatar = ['https://cx.mingmeijt.com' + JSON.parse(res.data).data]
									}
									console.log(_this.avatar)
								}
							});
						}
						setTimeout(()=>{
							// uni.setStorageSync('avatar_', JSON.stringify(images))
						},2000)
					}
				});
				
			},
			del_img(index) {
				this.avatar.splice(index, 1); // 删除指定位置元素
			},
			submit() {
				uni.showLoading({
					title: '上传中'
				})
				var data = {
					user_id: this.user_id,
					// label_id: this.label_id,
					title: this.content,
					// goods_id: this.goods_id,
					
					content: this.content,
					session_id: uni.getStorageSync("sessionid")
				}
				if (this.mp4_video.length>0) { // 说明只是传视频
					data.images = this.mp4_video[0].substring(24)
				} else { // 说明为传图片
					let img_devide = ''
					for(let i = 0; i < this.avatar.length; i++ ) {
						img_devide = img_devide +'#' + this.avatar[i].substring(24)
					}
					data.images = img_devide
				}
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaper/addPaper',
					method: 'POST',
					data: data,
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: (res) => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						if(res.data.code == 998){
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						setTimeout(() => {
							uni.hideLoading()
							if (res.data.code == 200) {
								uni.reLaunch({
									url: './pyq'
								})
							}
						}, 1000);
					}
				});
			},
			// 显示删除选择面板
			toggleMask1(type,index){
				if (index != undefined || index != '') {this.index = index}
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.maskState1 = 2;
				setTimeout(()=>{
					this.maskState1 = state;
				}, timer)
				
			},
			getPhotoClickIdx(e) {
				let _this = this;
				let idx = e.currentTarget.dataset.index;
			  let imgs = e.currentTarget.dataset.imgs.map((item, index) => {
					return  item;
				});
				console.log(imgs)
				console.log(idx)
				_this.imgPreview(imgs, idx);
			},
			imgPreview (list, idx) {
				if(list && list.length > 0){        
					uni.previewImage({
						current:list[idx],    //  传 Number H5端出现不兼容 
						urls: list
					});
				}
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.mask{
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0,0,0,0);
		z-index: 9995;
		transition: .3s;
		
		.mask-content{
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			// background: #f3f3f3;
			transform: translateY(100%);
			transition: .3s;
			overflow-y:scroll;
		}
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.4);
			
			.mask-content{
				transform: translateY(0);
			}
		}
	}
</style>
